<template>
  <div>
    <div id="map-container"></div>
        <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
          <van-tabbar-item replace to="/homepage" icon="wap-home-o">首页</van-tabbar-item>
          <van-tabbar-item replace to="/category" icon="apps-o">理疗师</van-tabbar-item>
          <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">订单</van-tabbar-item>
          <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>
        </van-tabbar>
  </div>

</template>

<script>
export default {
  name: "Map",
  data() {
    return {
      active: 1,
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  created() {
    this.initMap()
  },
  methods: {
    initMap() {
      this.map = new AMap.Map("map-container", {
        center: [116.208741,40.136902],
        zoom: 13,
      });

      // 添加控件
      AMap.plugin(["AMap.ToolBar", "AMap.Scale"], () => {
        this.map.addControl(new AMap.ToolBar());
        this.map.addControl(new AMap.Scale());
      });
    },
  },
};
</script>

<style scoped>
#map-container {
  width: 100%;
  height: 1000px;
}
</style>




<!--<template>-->
<!--  <div class="shouj">-->
<!--    &lt;!&ndash; 添加搜索输入框 &ndash;&gt;-->
<!--    <input type="text" v-model="searchKeyword" placeholder="输入关键字搜索附近位置"-->
<!--           @keyup.enter="searchNearbyLocations">-->
<!--    <div id="container"></div>-->
<!--    <h4>当前位置</h4><p>地址: {{ currentAddress }}</p>-->
<!--    &lt;!&ndash; 用于展示搜索结果的列表 &ndash;&gt;-->
<!--    <ul v-if="searchResults.length > 0">-->
<!--      <li v-for="(result, index) in searchResults" :key="index">-->
<!--        {{ result.name }} - {{ result.address }}-->
<!--      </li>-->
<!--    </ul>-->


<!--            <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">-->
<!--              <van-tabbar-item replace to="/homepage" icon="wap-home-o">首页</van-tabbar-item>-->
<!--              <van-tabbar-item replace to="/category" icon="apps-o">理疗师</van-tabbar-item>-->
<!--              <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">订单</van-tabbar-item>-->
<!--              <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>-->
<!--            </van-tabbar>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--import {NavBar} from 'vant';-->
<!--import AMapLoader from "@amap/amap-jsapi-loader";-->
<!--import axios from "axios";-->

<!--window._AMapSecurityConfig = {-->
<!--  // 安全密钥-->
<!--  securityJsCode: "cee6aa7538a52f5c88f586c1a8662adf",-->
<!--};-->

<!--export default {-->
<!--  components: {-->
<!--    'van-nav-bar': NavBar-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      active:1,-->
<!--      map: null,-->
<!--      Geolocation: null,-->
<!--      currentLng: 0,-->
<!--      currentLat: 0,-->
<!--      currentAddress: '',-->
<!--      geocoder: null,-->
<!--      // 新增，用于存储搜索关键字-->
<!--      searchKeyword: '',-->
<!--      // 新增，用于存储搜索附近位置的结果-->
<!--      searchResults: []-->
<!--    };-->
<!--  },-->
<!--  created() {-->
<!--    this.initMap();-->
<!--  },-->
<!--  methods: {-->
<!--    initMap() {-->
<!--      AMapLoader.load({-->
<!--        key: "56568fc379b72f35a94228f39c6ae2ec",-->
<!--        version: "2.0",-->
<!--        plugins: ["AMap.Geolocation", "AMap.Geocoder", "AMap.PlaceSearch"], // 添加 AMap.PlaceSearch 插件-->
<!--      })-->
<!--          .then((AMap) => {-->
<!--            this.Geolocation = new AMap.Geolocation({-->
<!--              position: {-->
<!--                bottom: '20px',-->
<!--                right: '20px'-->
<!--              },-->
<!--              enableHighAccuracy: true-->
<!--            });-->
<!--            this.map = new AMap.Map("container", {-->
<!--              viewMode: "2D",-->
<!--              zoom: 15,-->
<!--            });-->
<!--            this.map.addControl(this.Geolocation);-->

<!--            // 创建地理编码实例-->
<!--            this.geocoder = new AMap.Geocoder({-->
<!--              city: "全国",-->
<!--              radius: 1000,-->
<!--            });-->

<!--            this.Geolocation.on('complete', (data) => {-->
<!--              this.currentLng = data.position.lng;-->
<!--              this.currentLat = data.position.lat;-->
<!--              this.map.setCenter([this.currentLng, this.currentLat]);-->
<!--              this.getAddressByLatLng([this.currentLng, this.currentLat]);-->
<!--            });-->

<!--            this.Geolocation.on('error', (err) => {-->
<!--              console.error('获取当前位置失败：', err);-->
<!--            });-->
<!--          })-->
<!--          .catch((err) => {-->
<!--            console.error('地图加载失败：', err);-->
<!--          });-->
<!--    },-->
<!--    goBack() {-->
<!--      this.$router.push("/show");-->
<!--    },-->
<!--    getAddressByLatLng(latLng) {-->
<!--      this.geocoder.getAddress(latLng, (status, result) => {-->
<!--        if (status === "complete" && result.info === "OK") {-->
<!--          this.currentAddress = result.regeocode.formattedAddress;-->
<!--        } else {-->
<!--          console.error("获取地址失败:", result);-->
<!--          this.currentAddress = '地址获取失败';-->
<!--        }-->
<!--      });-->
<!--    },-->
<!--    // 新增，搜索附近位置的方法-->
<!--    searchNearbyLocations() {-->
<!--      if (!this.searchKeyword.trim()) {-->
<!--        return;-->
<!--      }-->
<!--      const currentLngLat = new AMap.LngLat(this.currentLng, this.currentLat);-->
<!--      const placeSearch = new AMap.PlaceSearch({-->
<!--        map: this.map,-->
<!--        radius: 1000, // 搜索半径，可根据需求调整-->
<!--        extensions: 'all'-->
<!--      });-->
<!--      placeSearch.searchNearBy(this.searchKeyword, currentLngLat, (status, result) => {-->
<!--        if (status === 'complete') {-->
<!--          this.searchResults = result.poiList.pois.map(poi => {-->
<!--            return {-->
<!--              name: poi.name,-->
<!--              address: poi.address-->
<!--            };-->
<!--          });-->
<!--        } else {-->
<!--          this.searchResults = [];-->
<!--          console.error('附近位置搜索失败:', result);-->
<!--        }-->
<!--      });-->
<!--    }-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--#container {-->
<!--  width: 100%;-->
<!--  height: 650px;-->
<!--}-->

<!--/* 可添加一些样式来美化搜索结果列表展示，以下是简单示例 */-->
<!--ul {-->
<!--  list-style: none;-->
<!--  padding: 0;-->
<!--}-->

<!--li {-->
<!--  margin-bottom: 5px;-->
<!--  border-bottom: 1px solid #ccc;-->
<!--  padding-bottom: 5px;-->
<!--}-->
<!--</style>-->
























<!--<template>-->
<!--  <div id="app">-->
<!--&lt;!&ndash;    <div class="content">&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="order-search-container">&ndash;&gt;-->
<!--&lt;!&ndash;        <span  class="address-select">&ndash;&gt;-->
<!--&lt;!&ndash;					{{ this.city }}&ndash;&gt;-->
<!--&lt;!&ndash;          &lt;!&ndash; 动态绑定箭头方向 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;          &lt;!&ndash;					<i :class="['arrow', DiZhi ? 'arrow-up' : 'arrow-down']"></i>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;				</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="order-label"></span>&ndash;&gt;-->
<!--&lt;!&ndash;        &lt;!&ndash;        <van-search v-model="form.technicianName" placeholder="请输入搜索关键词"  class="search-input"/>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        <van-search&ndash;&gt;-->
<!--&lt;!&ndash;            v-model="form.technicianName"&ndash;&gt;-->
<!--&lt;!&ndash;            shape="round"&ndash;&gt;-->
<!--&lt;!&ndash;            background="#4fc08d"&ndash;&gt;-->
<!--&lt;!&ndash;            placeholder="请输入搜索关键词"&ndash;&gt;-->
<!--&lt;!&ndash;        />&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="search-icon" @click="toggleSearch()">🔍︎</span>&ndash;&gt;-->


<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="tabs">&ndash;&gt;-->
<!--&lt;!&ndash;					<span class="tab"  @click="quan()">&ndash;&gt;-->
<!--&lt;!&ndash;						全部技师&ndash;&gt;-->
<!--&lt;!&ndash;					</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="tab"  @click="ke()">&ndash;&gt;-->
<!--&lt;!&ndash;						可服务&ndash;&gt;-->
<!--&lt;!&ndash;					</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="tab"  @click="fu()">&ndash;&gt;-->
<!--&lt;!&ndash;						服务中&ndash;&gt;-->
<!--&lt;!&ndash;					</span>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;      <div class="tables">&ndash;&gt;-->
<!--&lt;!&ndash;        	<span class="sd"  @click="toggleSearch()">&ndash;&gt;-->
<!--&lt;!&ndash;						综合排序&ndash;&gt;-->
<!--&lt;!&ndash;					</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="sd"  @click="selectPrice()">&ndash;&gt;-->
<!--&lt;!&ndash;						 <van-dropdown-menu>&ndash;&gt;-->
<!--&lt;!&ndash;          <van-dropdown-item v-model="value1" :options="option1" />&ndash;&gt;-->
<!--&lt;!&ndash;        </van-dropdown-menu>&ndash;&gt;-->
<!--&lt;!&ndash;					</span>&ndash;&gt;-->

<!--&lt;!&ndash;        <span class="sd"  @click="selectXiao()">&ndash;&gt;-->
<!--&lt;!&ndash;						销量&ndash;&gt;-->
<!--&lt;!&ndash;					</span>&ndash;&gt;-->
<!--&lt;!&ndash;        <span class="sd"  @click="selectHao()">&ndash;&gt;-->
<!--&lt;!&ndash;						好评&ndash;&gt;-->
<!--&lt;!&ndash;					</span>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->






<!--&lt;!&ndash;      <div>&ndash;&gt;-->
<!--&lt;!&ndash;        &lt;!&ndash; 动态渲染每个派单 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;        <div v-for="(item, index) in tan" :key="index" class="order-item">&ndash;&gt;-->
<!--&lt;!&ndash;          &lt;!&ndash; 图片和内容部分 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;          <div class="order-content" @click="Xinxi(item.id)">&ndash;&gt;-->
<!--&lt;!&ndash;            &lt;!&ndash; 左侧图片 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="order-image">&ndash;&gt;-->
<!--&lt;!&ndash;              <img :src="item.img" alt="Item Image"/>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->

<!--&lt;!&ndash;            &lt;!&ndash; 右侧内容 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="order-text">&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 标题 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <span class="title">{{ item.technicianName }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              &lt;!&ndash; 状态 &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              <span v-if="item.status == 0 " class="order-status">&ndash;&gt;-->
<!--&lt;!&ndash;                 可服务&ndash;&gt;-->
<!--&lt;!&ndash;                </span>&ndash;&gt;-->
<!--&lt;!&ndash;              <span v-if="item.status == 1" class="order-statustwo">&ndash;&gt;-->
<!--&lt;!&ndash;             服务中&ndash;&gt;-->
<!--&lt;!&ndash;                </span>&ndash;&gt;-->
<!--&lt;!&ndash;              <span class="hospital">已服务:{{ item.serviceTotal }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              <span class="">&ndash;&gt;-->
<!--&lt;!&ndash;                {{ item.distance }}km</span>&ndash;&gt;-->
<!--&lt;!&ndash;              <span class="hospital" style="color:red">{{ item.rating}}✩</span>&ndash;&gt;-->
<!--&lt;!&ndash;              <span class="appointment-time">收藏:{{ item.collect }}</span>&ndash;&gt;-->
<!--&lt;!&ndash;              <van-tag plain type="primary">最早可约{{item.earlyTime}}</van-tag>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="order-price">&ndash;&gt;-->
<!--&lt;!&ndash;              <van-button&ndash;&gt;-->
<!--&lt;!&ndash;                  type="primary"&ndash;&gt;-->
<!--&lt;!&ndash;                  shape="square"&ndash;&gt;-->
<!--&lt;!&ndash;                  @click="onFloatingButtonClick"&ndash;&gt;-->
<!--&lt;!&ndash;                  style="display: flex;margin-top: 100px"&ndash;&gt;-->
<!--&lt;!&ndash;              >立即预约</van-button>&ndash;&gt;-->
<!--&lt;!&ndash;            </div>&ndash;&gt;-->
<!--&lt;!&ndash;          </div>&ndash;&gt;-->
<!--&lt;!&ndash;        </div>&ndash;&gt;-->
<!--&lt;!&ndash;      </div>&ndash;&gt;-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->




<!--    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">-->
<!--      <van-tabbar-item replace to="/homepage" icon="wap-home-o">首页</van-tabbar-item>-->
<!--      <van-tabbar-item replace to="/category" icon="apps-o">理疗师</van-tabbar-item>-->
<!--      <van-tabbar-item replace to="/shoppingcart" icon="shopping-cart-o">订单</van-tabbar-item>-->
<!--      <van-tabbar-item replace to="/mine" icon="user-o">我的</van-tabbar-item>-->
<!--    </van-tabbar>-->
<!--  </div>-->
<!--</template>-->


<!--<script>-->
<!--import axios from 'axios';-->
<!--import {Dialog} from 'vant';-->
<!--import {Toast} from 'vant';-->
<!--import MapLoader from "./util";-->

<!--export default {-->
<!--  data() {-->
<!--    return {-->
<!--      // value1:0,-->
<!--      // option1: [-->
<!--      //   { text: '价格', value: 0 },-->
<!--      // ],-->
<!--      // sel:{},-->
<!--      // tp: 'https://img01.yzcdn.cn/vant/apple-1.jpg',-->
<!--      // ta: [],-->
<!--      // Ra: '',-->
<!--      // Qa: '',-->
<!--      // city: '定位中...',-->
<!--      // abcde: '',-->
<!--      // active: 1,-->
<!--      // value: "",  // 搜索框的值-->
<!--      // showSearch: false,  // 控制搜索框显示或隐藏-->
<!--      // activeIndex: 8,  // 默认选中第一个 tab-->
<!--      // tan: [],-->
<!--      // form: {},-->
<!--      // time: {},-->
<!--      // user: {},-->
<!--      // showPopup: false,-->
<!--      // showPopup2: false, // 控制弹窗显示-->
<!--      // minDate: new Date(2024, 11, 20),  // 设置最小日期-->
<!--      // maxDate: new Date(2025, 11, 31), // 设置最大日期-->
<!--      // zid:null,-->
<!--    }-->
<!--  },-->
<!--  created() {-->
<!--    // MapLoader();-->
<!--    // var item = sessionStorage.getItem("userDB");-->
<!--    // if (item == null) {-->
<!--    //   location.href = "#/login";-->
<!--    // }-->
<!--    // this.user = JSON.parse(item);-->
<!--    // // this.findPage();-->
<!--    //-->
<!--    // // 延迟获取地理位置-->
<!--    // setTimeout(() => {-->
<!--    //   this.Ra = localStorage.getItem("R");-->
<!--    //   this.Qa = localStorage.getItem("Q");-->
<!--    //   this.abcde = this.Ra + ',' + this.Qa-->
<!--    //   this.addresaaa();-->
<!--    // }, 2000);-->
<!--    // const zid = this.$route.query.zid;-->
<!--    // if (zid !=null) {-->
<!--    //   this.setActive(zid);-->
<!--    // }else {-->
<!--    //   this.setActive(8);-->
<!--    // }-->
<!--  },-->
<!--  methods: {-->
<!--    // // 好评-->
<!--    // selectHao(){-->
<!--    //   console.log("好评")-->
<!--    // },-->
<!--    // // 价格筛选-->
<!--    // selectPrice(){-->
<!--    //   console.log("价格")-->
<!--    // },-->
<!--    // // 销量筛选-->
<!--    // selectXiao(){-->
<!--    //   console.log("销量")-->
<!--    // },-->
<!--    // toggleStatus(){-->
<!--    //   this.SelectStatus();-->
<!--    // },-->
<!--    // SelectStatus(){-->
<!--    //   axios.post(`http://localhost:10086/technician/selectStatus`,this.sel).then(res=>{-->
<!--    //     this.tan = res.data;-->
<!--    //   })-->
<!--    // },-->
<!--    // addresaaa() {-->
<!--    //   console.log(this.Ra);-->
<!--    //   console.log(this.Qa);-->
<!--    //   axios.get(`https://restapi.amap.com/v3/geocode/regeo?output=JSON&location=${this.abcde}&key=56568fc379b72f35a94228f39c6ae2ec&radius=1000&extensions=all `).then(res => {-->
<!--    //         // 获取市级-->
<!--    //         // this.city=res.data.regeocode.addressComponent.district-->
<!--    //         // 获取区级-->
<!--    //         this.city = res.data.regeocode.addressComponent.province-->
<!--    //         console.log("当前地理位置：" + this.city)-->
<!--    //       }-->
<!--    //   )-->
<!--    // },-->
<!--    // onFloatingButtonClick(){-->
<!--    //   console.log("被点击了")-->
<!--    // },-->
<!--    // contactCustomer(rescuersPhone) {-->
<!--    //   const confirmation = confirm(`您确定要拨打电话给 ${rescuersPhone} 吗？`);-->
<!--    //   if (confirmation) {-->
<!--    //     window.location.href = 'tel:' + rescuersPhone;  // 使用 rescuersPhone-->
<!--    //   }-->
<!--    // },-->
<!--    // //结束确认选择-->
<!--    // onCancel1(value) {-->
<!--    //   this.time.orderEndtime = value;-->
<!--    //   this.showPopup2 = false;-->
<!--    //   if (this.time.orderBegintime >= this.time.orderEndtime) {-->
<!--    //     Toast.fail('结束时间不能大于开始时间');-->
<!--    //     return;-->
<!--    //   }-->
<!--    //   // 将时间转换为 "YYYY-MM-DD HH:mm:ss" 格式-->
<!--    //   const formatDate = (date) => {-->
<!--    //     const d = new Date(date);-->
<!--    //     const year = d.getFullYear();-->
<!--    //     const month = ('0' + (d.getMonth() + 1)).slice(-2); // 月份从0开始，所以加1-->
<!--    //     const day = ('0' + d.getDate()).slice(-2);-->
<!--    //     const hours = ('0' + d.getHours()).slice(-2);-->
<!--    //     const minutes = ('0' + d.getMinutes()).slice(-2);-->
<!--    //     const seconds = ('0' + d.getSeconds()).slice(-2);-->
<!--    //-->
<!--    //     return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;-->
<!--    //   };-->
<!--    //-->
<!--    //   const formattedBeginTime = formatDate(this.time.orderBegintime);-->
<!--    //   const formattedEndTime = formatDate(this.time.orderEndtime);-->
<!--    //-->
<!--    //   // 将格式化后的时间存入 form 对象-->
<!--    //   this.time.orderBegintime = formattedBeginTime;-->
<!--    //   this.time.orderEndtime = formattedEndTime;-->
<!--    //   axios.post("http://123.56.135.19:5432/api-nurse-service/pzph-order/updateTime", this.time).then(res => {-->
<!--    //     Toast.success('修改成功');-->
<!--    //   })-->
<!--    //-->
<!--    // },-->
<!--    // // 开始确认选择-->
<!--    // onConfirm(value) {-->
<!--    //   this.time.orderBegintime = value;-->
<!--    //   this.showPopup = false;-->
<!--    //   this.showPopup2 = true;-->
<!--    // },-->
<!--    // // 取消选择-->
<!--    // onCancel() {-->
<!--    //   this.showPopup = false;-->
<!--    //   this.showPopup2 = false;-->
<!--    // },-->
<!--    // XiuGai(id) {-->
<!--    //   this.time = {};-->
<!--    //   this.time.id = id;-->
<!--    //   this.showPopup = true-->
<!--    // },-->
<!--    // tiqian(id) {-->
<!--    //   Dialog.confirm({-->
<!--    //     message: '确定提前完成',-->
<!--    //   }).then(() => {-->
<!--    //     axios.post(`http://123.56.135.19:5432/api-nurse-service/pzph-order/finishUpdate?id=${id}`).then(res => {-->
<!--    //       this.setActive(8);-->
<!--    //     })-->
<!--    //   }).catch(() => {-->
<!--    //-->
<!--    //   });-->
<!--    // },-->
<!--    // Xinxi(id) {-->
<!--    //   // 通过查询参数传递 id-->
<!--    //   location.href = `#/fu?oid=${id}`;-->
<!--    // },-->
<!--    // toggleSearch() {-->
<!--    //   // this.showSearch = !this.showSearch;  // 切换搜索框显示状态-->
<!--    //   // this.setActive(8);-->
<!--    //   // this.form = {};-->
<!--    //   axios.post("http://localhost:10086/technician/findAll2", this.form).then(res=>{-->
<!--    //     this.tan = res.data;-->
<!--    //   })-->
<!--    // },-->
<!--    // ke(){-->
<!--    //   this.form.status=0-->
<!--    //   this.toggleSearch()-->
<!--    // },-->
<!--    // fu(){-->
<!--    //   this.form.status=1-->
<!--    //   this.toggleSearch()-->
<!--    // },-->
<!--    // quan(){-->
<!--    //   this.form.status=null-->
<!--    //   this.toggleSearch()-->
<!--    // },-->
<!--    //-->
<!--    // // 查询状态不为3的订单-->
<!--    // setActive(index) {-->
<!--    //   // 设置点击的标签为当前激活标签-->
<!--    //   this.activeIndex = index;-->
<!--    //   //将标签状态传给后台-->
<!--    //   this.form.orderStatus = index;-->
<!--    //   this.form.userEscortid = this.user.id;-->
<!--    //   axios.post("http://localhost:10086/technician/findAll2", this.form).then(res => {-->
<!--    //     this.tan = res.data;-->
<!--    //   })-->
<!--    // }-->
<!--  },-->
<!--}-->
<!--</script>-->

<!--<style>-->
<!--/* 确保页面内容区域不会被 tabbar 遮挡 */-->
<!--.page-container {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  min-height: 100vh;-->
<!--  /* 保证页面高度至少为屏幕高度 */-->
<!--}-->

<!--.order-buttons {-->
<!--  display: flex;-->
<!--}-->
<!--/* 内容部分 */-->
<!--.content {-->
<!--  flex: 1;-->
<!--  /* 使内容部分占满剩余空间 */-->
<!--  padding-bottom: 100px;-->
<!--  /* 给内容部分底部留出空间，以避免被 Tabbar 遮挡 */-->
<!--}-->

<!--/* 固定 Tabbar */-->
<!--.fixed-tabbar {-->
<!--  position: fixed;-->
<!--  left: 0;-->
<!--  bottom: 0;-->
<!--  width: 100%;-->
<!--  z-index: 100;-->
<!--  /* 确保 Tabbar 在最上层 */-->
<!--  background-color: #fff;-->
<!--  /* 设置背景颜色以便清晰显示 */-->
<!--}-->

<!--.order-search-container {-->
<!--  display: flex;-->
<!--  align-items: center;-->
<!--  justify-content: space-between;-->
<!--  width: 100%;-->
<!--  height: 120px;-->
<!--  max-width: 100%;-->
<!--  /* 最大宽度，可根据需要调整 */-->
<!--  padding: 10px;-->
<!--  box-sizing: border-box;-->
<!--  background-color: #4fc08d;-->
<!--  /* 可根据需要设置背景色 */-->
<!--  border-radius: 8px;-->
<!--  /* 可根据需要调整圆角 */-->
<!--  position: fixed;-->
<!--  /* 固定位置 */-->
<!--  top: 0;-->
<!--  /* 固定在页面顶部 */-->
<!--  left: 50%;-->
<!--  /* 水平居中 */-->
<!--  transform: translateX(-50%);-->
<!--  /* 确保完全居中 */-->
<!--  z-index: 1000;-->
<!--  /* 保证它在页面其他元素之上 */-->
<!--}-->
<!--.address-select {-->
<!--  display: inline-flex;-->
<!--  /* 使用flex布局，使文本和箭头对齐 */-->
<!--  align-items: center;-->
<!--  /* 垂直居中对齐 */-->
<!--  padding: 8px 13px;-->
<!--  /* 设置内边距 */-->
<!--  font-size: 16px;-->
<!--  /* 字体大小 */-->
<!--  color: #333;-->
<!--  /* 字体颜色 */-->
<!--  background-color: #f0f0f0;-->
<!--  /* 背景色 */-->
<!--  border-radius: 25px;-->
<!--  /* 圆角效果 */-->
<!--  border: 1px solid #ddd;-->
<!--  /* 边框 */-->
<!--  cursor: pointer;-->
<!--  /* 鼠标悬停时显示为可点击 */-->
<!--  transition: all 0.3s ease;-->
<!--  /* 平滑的过渡效果 */-->
<!--}-->
<!--.order-label {-->
<!--  font-size: 30px;-->
<!--  color: #333;-->
<!--  font-weight: bold;-->
<!--}-->

<!--.search-input {-->
<!--  flex-grow: 1;-->
<!--  /* 使搜索框在中间自动伸展 */-->
<!--  margin: 0 10px;-->
<!--  /* 左右间距，避免和其他元素重叠 */-->
<!--  max-width: 400px;-->
<!--  /* 限制搜索框的最大宽度 */-->
<!--  height: 60px;-->

<!--  border: none;-->
<!--}-->

<!--.search-icon {-->
<!--  cursor: pointer;-->
<!--  font-size: 30px;-->
<!--  color: #007aff;-->
<!--  /* 蓝色，增强点击性 */-->
<!--  transition: color 0.3s ease;-->
<!--}-->

<!--.search-icon:hover {-->
<!--  color: #005bb5;-->
<!--  /* 悬浮时改变颜色 */-->
<!--}-->

<!--/* 状态 */-->
<!--.tabs {-->
<!--  width: 100%;-->
<!--  background: orange;-->
<!--  display: flex;-->
<!--//justify-content: space-between;-->
<!--  /* 设置上边距 */-->
<!--  margin-top: 120px; /* 可以根据需要调整这个值 */-->
<!--  color:white;-->
<!--//margin-left: 10px;-->


<!--}-->
<!--.tables {-->
<!--  width: 100%;-->
<!--  background: white;-->

<!--  display: flex;-->
<!--//justify-content: space-between;-->
<!--  /* 设置上边距 */-->
<!--  /* 可以根据需要调整这个值 */-->

<!--//margin-left: 10px;-->

<!--  /* 平均分配间隔 */-->
<!--}-->
<!--.sd {-->
<!--  color: black;-->
<!--  padding: 10px;-->
<!--  text-align: center;-->
<!--  font-size: 18px;-->
<!--  cursor: pointer;-->
<!--  transition: color 0.3s, border-bottom 0.3s;-->
<!--  flex-grow: 1;-->
<!--  /* 平均分配每个 tab 的宽度 */-->
<!--}-->

<!--.tab {-->
<!--  color: white;-->
<!--  padding: 10px;-->
<!--  text-align: center;-->
<!--  font-size: 22px;-->
<!--  cursor: pointer;-->
<!--  transition: color 0.3s, border-bottom 0.3s;-->
<!--  flex-grow: 1;-->
<!--  /* 平均分配每个 tab 的宽度 */-->
<!--}-->

<!--.tab.active {-->
<!--  color: #f30909;-->
<!--  /* 激活时文字颜色 */-->
<!--  border-bottom: 2px solid #ef1616;-->
<!--  /* 激活时下划线 */-->
<!--}-->

<!--.tab:hover {-->
<!--  color: #333333;-->
<!--  /* 悬停时文字颜色 */-->
<!--}-->


<!--/* 信息 */-->
<!--.order-item {-->
<!--  display: flex;-->
<!--  flex-direction: column;-->
<!--  margin-bottom: 20px;-->
<!--  padding: 15px;-->
<!--  border: 1px solid #ddd;-->
<!--  border-radius: 8px;-->
<!--  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);-->
<!--}-->

<!--.order-content {-->
<!--  display: flex;-->
<!--  margin-bottom: 10px;-->
<!--  position: relative;-->
<!--  /* 使得子元素的 absolute 定位基于此容器 */-->
<!--}-->

<!--.order-image img {-->
<!--  width: 120px;-->
<!--  height: 120px;-->
<!--  object-fit: cover;-->
<!--  border-radius: 8px;-->
<!--  margin-top: 15px;-->
<!--}-->

<!--.order-text {-->
<!--  margin-left: 15px;-->
<!--  flex: 1;-->
<!--}-->

<!--/* 标题样式：展示在左上角，字号26px，黑色 */-->
<!--.order-text .title {-->
<!--  font-size: 26px;-->
<!--  color: black;-->
<!--  display: block;-->
<!--  /* 确保它单独占一行 */-->
<!--  margin-bottom: 10px;-->
<!--  /* 标题和其他内容之间的间距 */-->
<!--}-->


<!--.order-status {-->
<!--  color: green;-->
<!--  font-size: 18px;-->
<!--  /* 状态字体增大 */-->
<!--  font-weight: bold;-->
<!--  position: absolute;-->
<!--  top: 4px;-->
<!--  right: 0;-->
<!--  transform: rotate(15deg);  /* 设置30度倾斜 */-->
<!--}-->

<!--.order-statustwo {-->

<!--  color: red;-->
<!--  font-size: 18px;-->
<!--  /* 状态字体增大 */-->
<!--  font-weight: bold;-->
<!--  position: absolute;-->
<!--  top: 4px;-->
<!--  right: 0;-->

<!--}-->

<!--.order-text .hospital,-->
<!--.order-text .appointment-time,-->
<!--.order-text .patient-info {-->
<!--  font-size: 14px;-->
<!--  color: gray;-->
<!--  display: block;-->
<!--  /* 确保每项内容单独占一行 */-->
<!--  margin-top: 8px;-->
<!--  /* 内容之间的间距 */-->
<!--}-->

<!--.order-footer {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  border-top: 1px solid #ccc;-->
<!--  /* 添加灰色的上边框 */-->
<!--  padding: 18px 0;-->
<!--  /* 设置上下内边距为 10px，左右为 0 */-->
<!--}-->


<!--.price-label {-->
<!--  color: #333;-->
<!--  /* 深灰色，让文字更易读 */-->
<!--  font-size: 14px;-->
<!--  /* 字体大小 */-->
<!--  font-weight: bold;-->
<!--  /* 加粗文字，突出显示 */-->
<!--}-->

<!--.price-amount {-->
<!--  color: red;-->
<!--  font-size: 18px;-->
<!--  font-weight: bold;-->
<!--  margin-left: 10px;-->
<!--  /* 向右移动 10px */-->
<!--}-->

<!--.price-amounttwo {-->
<!--  color: rgb(197, 193, 193);-->
<!--  font-size: 24px;-->
<!--  font-weight: bold;-->
<!--  margin-left: 10px;-->
<!--  /* 向右移动 10px */-->
<!--}-->

<!--/* 通用按钮样式 */-->
<!--.order-buttons {-->
<!--  padding: 0px 6px;-->
<!--  /* 设置按钮的内边距 */-->
<!--  font-size: 13px;-->
<!--  /* 设置字体大小 */-->
<!--  border: 1px solid #ccc;-->
<!--  /* 边框统一为 1px，颜色为浅灰 */-->
<!--  border-radius: 20px;-->
<!--  /* 边框圆角 */-->
<!--  cursor: pointer;-->
<!--  /* 鼠标悬停时显示为可点击状态 */-->
<!--  transition: all 0.3s ease;-->
<!--  /* 平滑过渡效果 */-->
<!--  width: auto;-->
<!--  /* 按钮宽度自动 */-->
<!--  display: inline-block;-->
<!--  /* 使按钮以块级元素显示 */-->
<!--  margin-left: 4px;-->
<!--  /* 设置按钮之间的右外边距为 10px */-->
<!--  float: right; /* 按钮向右浮动 */-->
<!--  margin-top: 1px;-->
<!--}-->

<!--/* '联系客服' 按钮的样式 */-->
<!--.contact-button {-->
<!--  color: gray;-->
<!--  /* 字体颜色为灰色 */-->
<!--  background-color: white;-->
<!--  /* 背景色为白色 */-->
<!--}-->

<!--.contact-button:hover {-->
<!--  background-color: #f0f0f0;-->
<!--  /* 悬停时背景色稍微变浅 */-->
<!--  border-color: #bbb;-->
<!--  /* 边框颜色变浅 */-->
<!--}-->

<!--/* 其他按钮（修改时间、提前完成）的样式 */-->
<!--.action-button {-->
<!--  color: white;-->
<!--  /* 字体颜色为白色 */-->
<!--  background-color: red;-->
<!--  /* 背景色为红色 */-->
<!--}-->

<!--.action-button:hover {-->
<!--  background-color: #c80000;-->
<!--  /* 悬停时背景色稍微变深 */-->
<!--}-->
<!--</style>-->